<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Motion Reveal Slideshow </title>
		<meta name="description" content="A simple slideshow with a reveal transition and a fullscreen content view" />
		<meta name="keywords" content="slideshow, reveal, effect, animation, web design, template, demo" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="loading">
		<svg class="hidden">
			<symbol id="icon-arrow" viewBox="0 0 24 24">
				<title>arrow</title>
				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
			</symbol>
			<symbol id="icon-drop" viewBox="0 0 24 24">
				<title>drop</title>
				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
			</symbol>
			<svg id="icon-github" viewBox="0 0 33 33">
				<title>github</title>
				<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
			</svg>
			<symbol id="icon-caret" viewBox="0 0 24 13">
				<title>caret</title>
				<path d="M23.646.328a.842.842 0 0 0-1.19 0l-10.459 10.48L1.517.328a.842.842 0 0 0-1.189 1.19L11.382 12.57c.164.164.369.246.595.246.205 0 .43-.082.594-.246L23.625 1.518a.824.824 0 0 0 .02-1.19z"/>
			</symbol>
		</svg>
		<main>
			
			<div class="slideshow">
				<div class="slide">
					<div class="preview">
						<div class="preview__img-wrap">
							<div class="preview__img" style="background-image: url(img/project1.jpg);"></div>
							<div class="preview__img-reveal"></div>
						</div>
						<h3 class="preview__title">Carmino Burano</h3>
						<div class="preview__content">
							<p>1.jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after the prototype. The purpose of jQuery design is to "write less, do more", that is, advocate writing less code and doing more. More things. It encapsulates JavaScript's commonly used function code</p>
						</div>
					</div>
					<div class="slide__img-wrap">
						<div class="slide__img" style="background-image: url(img/1.jpg);"></div>
						<div class="slide__img-reveal"></div>
					</div>
					<span class="slide__number">#01</span>
					<h3 class="slide__title">Carmino</h3>
				</div>
				<div class="slide">
					<div class="preview">
						<div class="preview__img-wrap">
							<div class="preview__img" style="background-image: url(img/project2.jpg);"></div>
							<div class="preview__img-reveal"></div>
						</div>
						<h3 class="preview__title">Jackardi Jack</h3>
						<div class="preview__content">
							<p>2.jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after the prototype. The purpose of jQuery design is to "write less, do more", that is, advocate writing less code and doing more. More things. It encapsulates JavaScript's commonly used function code</p>
						</div>
					</div>
					<div class="slide__img-wrap">
						<div class="slide__img" style="background-image: url(img/2.jpg);"></div>
						<div class="slide__img-reveal"></div>
					</div>
					<span class="slide__number">#02</span>
					<h3 class="slide__title">Jackardi</h3>
				</div>
				<div class="slide">
					<div class="preview">
						<div class="preview__img-wrap">
							<div class="preview__img" style="background-image: url(img/project3.jpg);"></div>
							<div class="preview__img-reveal"></div>
						</div>
						<h3 class="preview__title">Hostabili Hell</h3>
						<div class="preview__content">
							<p>3.jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after the prototype. The purpose of jQuery design is to "write less, do more", that is, advocate writing less code and doing more. More things. It encapsulates JavaScript's commonly used function code</p>
						</div>
					</div>
					<div class="slide__img-wrap">
						<div class="slide__img" style="background-image: url(img/3.jpg);"></div>
						<div class="slide__img-reveal"></div>
					</div>
					<span class="slide__number">#03</span>
					<h3 class="slide__title">Hostabili</h3>
				</div>
				<div class="slide">
					<div class="preview">
						<div class="preview__img-wrap">
							<div class="preview__img" style="background-image: url(img/project4.jpg);"></div>
							<div class="preview__img-reveal"></div>
						</div>
						<h3 class="preview__title">Tellawa Tell</h3>
						<div class="preview__content">
							<p>4.jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after the prototype. The purpose of jQuery design is to "write less, do more", that is, advocate writing less code and doing more. More things. It encapsulates JavaScript's commonly used function code</p>
						</div>
					</div>
					<div class="slide__img-wrap">
						<div class="slide__img" style="background-image: url(img/4.jpg);"></div>
						<div class="slide__img-reveal"></div>
					</div>
					<span class="slide__number">#04</span>
					<h3 class="slide__title">Tellawa</h3>
				</div>
				<div class="slide">
					<div class="preview">
						<div class="preview__img-wrap">
							<div class="preview__img" style="background-image: url(img/project5.jpg);"></div>
							<div class="preview__img-reveal"></div>
						</div>
						<h3 class="preview__title">Lochnox Lox</h3>
						<div class="preview__content">
							<p>5.jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after the prototype. The purpose of jQuery design is to "write less, do more", that is, advocate writing less code and doing more. More things. It encapsulates JavaScript's commonly used function code</p>
						</div>
					</div>
					<div class="slide__img-wrap">
						<div class="slide__img" style="background-image: url(img/5.jpg);"></div>
						<div class="slide__img-reveal"></div>
					</div>
					<span class="slide__number">#05</span>
					<h3 class="slide__title">Lochnox</h3>
				</div>
				<nav class="slidenav">
					<button class="slidenav__item slidenav__item--prev">Previous</button>
					<button class="slidenav__item slidenav__item--next">Next</button>
					<button class="slidenav__preview">
						<svg class="icon icon--caret">
							<use xlink:href="#icon-caret"></use>
						</svg>
					</button>
				</nav>
			</div>
		</main>
		
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script src="js/TweenMax.min.js"></script>
		<script src="js/demo.js"></script>
		
	</body>
</html>
